<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style type="text/css">
			body {
				background-color: rgba(0, 0, 0, 0);
			}
			
			.aui-content {
				margin-bottom: 0px;
			}
			
			.my-header {
				position: absolute;
				bottom: 0px;
			}
			
			.my-info {
				position: relative;
				padding: 20px 0;
				width: 100%;
				bottom: top;
				text-align: center;
				vertical-align: center;
			}
			
			.my-info img {
				width: 100px;
				height: 100px;
				/*border-radius: 50%;*/
			}
			
			.my-info p.nickname {
				margin-top: 5px;
				color: #ffffff;
				font-size: 18px;
			}
			
			.my-info h3 {
				color: #fff;
				font-weight: 200;
				font-size: 14px;
			}
			
			.my-info h4 {
				color: #fff;
			}
			
			.aui-col-xs-4 img {
				width: 60px;
			}
			
			.aui-grid-nine li {
				padding: 15px 10px;
			}
			
			.aui-grid-nine li:after {
				border-left: 0px;
				border-bottom: 0px;
			}
			
			#blank {
				height: 100%;
				width: 100%;
			}
			#share{
				width: 100%;
			}
			#cancel{
				color:#00adf3;
				text-align: center;
				font-size: 16px;
				padding-top: 10px;
				padding-bottom: 10px;
			}
		</style>
	</head>

	<body style="height: 100%;">
		<div class="aui-content my-header" id="share">
			<ul class="aui-grid-nine" id="list">
				<li class="aui-col-xs-4 aui-text-center" id="qq">
					<span><img src="../image/share/logo_qq.png"/></span>
					<p>QQ</p>
				</li>
				<li class="aui-col-xs-4 aui-text-center" id="qzone">
					<span><img src="../image/share/logo_qzone.png"/></span>
					<p>QQ空间</p>
				</li>
				<li class="aui-col-xs-4 aui-text-center" id="weibo">
					<span><img src="../image/share/logo_sinaweibo.png"/></span>
					<p>微博</p>
				</li>
				<li class="aui-col-xs-4 aui-text-center" id="weixin">
					<span><img src="../image/share/logo_wechat.png"/></span>
					<p>
						微信
					</p>
				</li>
				<li class="aui-col-xs-4 aui-text-center" id="weixinTimeline">
					<span><img src="../image/share/logo_wechatmoments.png"/></span>
					<p>朋友圈</p>
				</li>

				<li class="aui-col-xs-4 aui-text-center" id="sms">
					<span><img src="../image/share/logo_shortmessage.png"/></span>
					<p>短信</p>
				</li>
				<button class="aui-btn-block" id="cancel">取消</button>
			
			</ul>
			
		</div>
	</body>
	<!--<script type="text/javascript" src="../script/api.js"></script>-->
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function hideShare() {
			api.setFrameAttr({
				name: 'share',
				hidden: true
			});
		}

		function share(type, title, text, url, imgurl) {
			api.toast({
				msg: "分享操作正在后台进行…"
			});
			//			alert(type);
			var mobShare = api.require('mobShare');
			if (type == "qq") {
				var obj = api.require('qq');
				obj.shareNews({
					type: 'QFriend',
					url: url,
					title: title,
					description: title,
					imgUrl: imgurl[0]
				}, function(ret, err) {
					if (ret.status == true) {
						api.toast({
							msg: "分享成功！"
						});
					} else {
//						api.toast({
//							msg: "分享失败！"
//						});
					}
				});
			} else if (type == "qZone") {
				var obj = api.require('qq');
				obj.shareNews({
					type: 'QZone',
					url: url,
					title: title,
					description: title,
					imgUrl: imgurl[0]
				}, function(ret, err) {
					if (ret.toast == true) {
						api.alert({
							msg: "分享成功！"
						});
					} else {
//						api.toast({
//							msg: "分享失败！"
//						});
					}
				});
			} else if (type == "sinaWb") {
				mobShare.shareTo({
					target: type,
					title: title,
					text: text + url,
					imgPaths: imgurl,
					url: url,
				}, function(ret, err) {
					if (ret.status == true) {
						api.toast({
							msg: "分享成功！"
						});
					} else {
//						api.toast({
//							msg: "分享失败！"
//						});
					}
				});
			} else {
				mobShare.shareTo({
					target: type,
					title: title,
					text: text,
					imgPaths: imgurl,
					url: url,
				}, function(ret, err) {
					if (ret.toast == true) {
						api.toast({
							msg: "分享成功！"
						});
					} else {
//						api.toast({
//							msg: "分享失败！"
//						});
					}
				});
			}
			hideShare();
		}
		apiready = function() {
			var data = api.pageParam;
			var title = data.title;
			var text = data.text;
			var url = data.url;
			var imgurl = data.imgPaths;
			
			api.addEventListener({
			    name: 'shareTo'
			}, function(ret, err){
			    data = ret.value.sharePara;
				title = data.title;
				text = data.text;
				url = data.url;
				imgurl = data.imgPaths;
			});
			
			document.getElementById('qq').addEventListener('click', function() {
				share('qq', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('qzone').addEventListener('click', function() {
				share('qZone', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('weibo').addEventListener('click', function() {
				share('sinaWb', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('weixin').addEventListener('click', function() {
				share('wxSession', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('weixinTimeline').addEventListener('click', function() {
				share('wxTimeline', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('sms').addEventListener('click', function() {
				share('sms', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('cancel').addEventListener('click', function() {
				hideShare();
			});
		}
	</script>

</html>